$border_color: #808695;
$color: #515a6e;
$header_bg_color: #e8eaec;
$header_border_color: #dcdee2;
//$header_border_color: red;
.txt-right {
    justify-content: flex-end;
}
.txt-center {
    justify-content: center;
}
.check-item {
    color: #2d8cf0;
    cursor: pointer;
    font-size: 14px;
}
.left-table-container {
    color: $color;
    position: relative;
    background: #fff;
    width: 100%;
    overflow: hidden;
    .left-tab-fixed-box {
        font-size: 12px;
        background: #fff;
        position: fixed;
        box-shadow: #ccc 2px 0 6px -2px;
        .left-tab-fixed-body {
            overflow: auto;
            border: solid 1px $border_color;
            border-top: none;
            border-bottom: none;
            overflow-x:hidden;
            overflow-y:scroll;
            scrollbar-width: none;
            .left-tab-fixed-body-row {
                display: flex;
                align-items: center;
                .left-tab-body-cell-box {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    box-sizing: border-box;
                    .left-tab-body-cell {
                        flex-shrink: 0;
                        box-sizing: border-box;
                        border-right: solid 1px $border_color;
                        border-bottom: solid 1px $border_color;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
        //body条样式
        .left-tab-fixed-body::-webkit-scrollbar{
            width: 0px;
            height: 7px;

        }
        .left-tab-fixed-header {
            display: flex;
	        font-weight: 700;
	        background: $header_bg_color;
            border: solid 1px $header_border_color;
            .left-tab-cell-item {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .left-tab-header {
        display: flex;
        align-items: center;
        font-size: 12px;
	    font-weight: 700;
	    background: $header_bg_color;
        width: 100%;
        overflow: hidden;
        border: solid 1px $header_border_color;
        .cell-gutter {
            width: 6px;
            flex-shrink: 0;
        }
        .left-tab-cell-item {
            border-right: solid 1px $header_border_color;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .left-table-body {
        width: 100%;
        overflow: auto;
        scrollbar-width: thin;
        border: solid 1px $border_color;
        border-top: none;
        .left-tab-body-cell-box {
            display: flex;
            align-items: center;
            font-size: 12px;
            box-sizing: border-box;
            .left-tab-body-cell {
                flex-shrink: 0;
                box-sizing: border-box;
                border-right: solid 1px $border_color;
                border-bottom: solid 1px $border_color;
                display: flex;
                align-items: center;
                //justify-content: center;
            }
        }
    }
    //body条样式
    .left-table-body::-webkit-scrollbar{
        width: 6px;
        height: 7px;
    }
    .left-table-body::-webkit-scrollbar-thumb:hover{
        width: 6px;
        height: 7px;
        cursor: pointer;
        background-color: rgba(50,50,50,.5);
    }
    .left-table-body::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: rgba(50,50,50,.2);
    }
    .left-table-body::-webkit-scrollbar-track{
        border-radius: 1em;
        background-color: rgba(50,50,50,.1);
    }
}

.right-table {
    background: #fff;
    width: 100%;
    .right-tab-header {
        display: flex;
        align-items: center;
        font-size: 12px;
	    font-weight: 700;
        background: $header_bg_color;
        width: 100%;
        overflow: hidden;
        border: solid 1px $header_border_color;
        .cell-gutter {
            width: 6px;
            flex-shrink: 0;
        }
        .right-tab-header-d-container {
            display: flex;
            flex-direction: column;
            background: $header_bg_color;
            color: $color;
            .right-tab-header-date-week-box {
                display: flex;
                align-items: center;
            }
            .header-date-item {
                border-right: solid 1px $header_border_color;
                font-size: 12px;
                text-align: center;
                line-height: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .right-tab-header-y-m-item {
                border-right: solid 1px $header_border_color;
                border-bottom: solid 1px $header_border_color;
                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .header-item {
            border-right: solid 1px $header_border_color;
            border-bottom: solid 1px $header_border_color;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .right-tab-body {
        width: 100%;
        overflow: auto;
        scrollbar-width: thin;
        border: solid 1px $border_color;
        border-top: none;
        .right-tab-body-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            box-sizing: border-box;
            .no-data {
                text-align: center;
                width: 100%;
                color: #515a6e;
                height: 36px;
                line-height: 36px;
            }
            .column-bar {
                flex-shrink: 0;
                height: 100%;
                box-sizing: border-box;
                border-bottom: solid 1px $border_color;
                .progress-bar {
                    height: 100%;
                    background: rgba(161, 92, 253, .9);
                    color: #fff;
                    flex-shrink: 0;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    border-radius: 24px;

                    .progress-ratio {
                        flex-shrink: 0;
                        text-align: start;
                        white-space: nowrap;
                        box-sizing: border-box;
	                    display: flex;
	                    align-items: center;
	                    .progress-ratio-val {
		                    font-weight: bold;font-size: 13px;margin-right: 4px;margin-left: 30px;
	                    }
	                    .progress-msg {
		                    font-size: 12px;
		                    transform: scale(0.85);
	                    }
                    }
                    .flag {
                        color: #ff9900;
                        font-size: 12px;
                        margin-left: 10px;
                        margin-right: 4px;
                        cursor: pointer;
                    }
                }
            }

            .table-body-cell {
                flex-shrink: 0;
                box-sizing: border-box;
                border-right: solid 1px $border_color;
                border-bottom: solid 1px $border_color;
                display: flex;
                align-items: center;
            }
        }
    }
    //header滚动条样式
    .right-tab-header::-webkit-scrollbar{
        width: 0px;
        height: 0px;
        overflow: hidden;
        overflow: -moz-scrollbars-none;
    }
    .right-tab-header::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: rgba(50,50,50,.3);
    }
    .right-tab-header::-webkit-scrollbar-track{
        border-radius: 1em;
        background-color: rgba(50,50,50,.1);
    }
    //body条样式
    .right-tab-body::-webkit-scrollbar{
        width: 6px;
        height: 7px;
    }
    .right-tab-body::-webkit-scrollbar-thumb:hover{
        width: 6px;
        height: 7px;
        cursor: pointer;
        background-color: rgba(50,50,50,.5);
    }
    .right-tab-body::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: rgba(50,50,50,.2);
    }
    .right-tab-body::-webkit-scrollbar-track{
        border-radius: 1em;
        background-color: rgba(50,50,50,.1);
    }
}

.hover-style {
    background: #f0faff;
}

